

// react 书写 样式 

// 1. 基于class  但是 react 必须 className 代替 class
// 2. 基于内联样式 style  style = {obj}   遵循 驼峰命名 
// style = {backgroundColor:"red",fontSize:20}
// lineHeight:'20px'    必须带单位 
// 3. 全局变量  外部样式  

// classNames 的使用 (动态类名切换)
// 1.引入classnames: import classnames from classnames。

// 2.classnames是一个函数，使用的形式较多，记住常用的使用方法即可：

// （1）传入一个对象：classnames({class1:true,class2:false}) ，true表示相应的class生效，反之false表示不生效。

// （2）接受多个类名：classnames(class1,class2,{ class3:false })


import { commonCss } from '../utils/common'
import './index.scss'
// import lessStyle from './demo.less'
// console.log(lessStyle)
import classnames from 'classnames'

const styles = {
    all:{
        padding:15,
        margin:15,
        border:'1px solid #123456',
        cursor:'pointer'
    }
}

export default class MyCss extends Component{
    render(){
        return (
            <div style={styles.all}>
                <h3 className="title" >MyCss - React 样式书写 </h3>
                <h4 className='subtitle' >1. 基于class  但是 react 必须 className 代替 class</h4>
                <h4 style={{ lineHeight:'20px', backgroundColor:'#b5b5b5', color:'#999',border:'1px solid #333',padding:15,borderRadius:20}}>  基于内联样式 style  style = {'obj'}   遵循 驼峰命名  </h4>
                <h4 style={Object.assign(commonCss.baseStyle, styles.all)}> 全局变量  外部样式   </h4>
                <h4 style={{...commonCss.baseStyle, ...styles.all}}> wh2217 - daydayup  </h4>
                <h4 className={classnames('title','subtitle')} >React is so cool </h4>
                <h4 className={classnames({title:true,subtitle:false})} >React is so cool more - more  </h4>
            </div>
        )
    }
} 